<template>
  <star-horse-dialog :title = "dialogTitle" :visible = "batchDialogTableVisible" @merge = "merge"
                     @mergeDraft = "mergeDraft"
                     @reset = "resetForm"
                     is-batch = "true">

    <el-table
        :data = "ruleForm.batchDataList"
        :row-class-name = "rowClassName"
        @selection-change = "handleDetailSelectionChange"
        border
        fit = "true"
        ref = "tb"
        v-loading = "loading"
    >
      <el-table-column align = "center" fixed = "left" type = "selection" width = "30"/>
      <el-table-column align = "center" label = "序号" prop = "xh" width = "50"></el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "主键"
          min-width = "200px"
          prop = "idDbinfo"
          required
          sortable v-if = " false ">
        <template #default = "scope">
          <el-input-number clearable placeholder = "请输入主键"
                           v-model = "batchDataList[scope.row.xh-1].idDbinfo"/>
        </template>
      </el-table-column>

      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "数据库类型"
          min-width = "200px"
          prop = "dbType"
          required
          sortable v-if = "true ">
        <template #default = "scope">
          <el-select placeholder = "请选择数据库类型" v-model = "batchDataList[scope.row.xh-1].dbType">
            <el-option
                :key = "sitem.value"
                :label = "sitem.name"
                :value = "sitem.value"
                clearable
                v-for = "sitem in dbTypeList"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "数据库地址"
          min-width = "200px"
          prop = "host"
          required
          sortable v-if = "true ">
        <template #default = "scope">
          <el-input clearable placeholder = "请输入数据库地址"

                    v-model = "batchDataList[scope.row.xh-1].host">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "数据库端口"
          min-width = "200px"
          prop = "port"
          required
          sortable v-if = "true ">
        <template #default = "scope">
          <el-input-number clearable placeholder = "请输入数据库端口"
                           v-model = "batchDataList[scope.row.xh-1].port">
          </el-input-number>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "数据库名称"
          min-width = "200px"
          prop = "dbName"
          required
          sortable v-if = "true ">
        <template #default = "scope">
          <el-input clearable placeholder = "请输入数据库名称"
                    v-model = "batchDataList[scope.row.xh-1].dbName"></el-input>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "账号"
          min-width = "200px"
          prop = "userName"
          required
          sortable v-if = "true ">
        <template #default = "scope">
          <el-input clearable placeholder = "请输入数据库账号"
                    v-model = "batchDataList[scope.row.xh-1].userName"></el-input>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "密码"
          min-width = "200px"
          prop = "password"
          required
          sortable v-if = "true ">
        <template #default = "scope">
          <el-input clearable placeholder = "请输入数据库密码"
                    v-model = "batchDataList[scope.row.xh-1].password"></el-input>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "修改人"
          min-width = "200px"
          prop = "updatedBy"
          sortable
          v-if = " false ">
        <template #default = "scope">
          <el-input clearable placeholder = "请输入修改人"
                    v-model = "batchDataList[scope.row.xh-1].updatedBy"></el-input>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "修改日期"
          min-width = "200px"
          prop = "updatedDate"
          sortable
          v-if = " false ">
        <template #default = "scope">
          <el-date-picker clearable placeholder = "请选择修改日期"
                          type = "date"
                          v-model = "batchDataList[scope.row.xh-1].updatedDate">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "创建人"
          min-width = "200px"
          prop = "createdBy"
          sortable
          v-if = " false ">
        <template #default = "scope">
          <el-input clearable placeholder = "请输入创建人"
                    v-model = "batchDataList[scope.row.xh-1].createdBy"></el-input>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "创建日期"
          min-width = "200px"
          prop = "createdDate"
          sortable
          v-if = " false ">
        <template #default = "scope">
          <el-date-picker clearable placeholder = "请选择创建日期"
                          type = "date"
                          v-model = "batchDataList[scope.row.xh-1].createdDate">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "是否删除 1 是 0否"
          min-width = "200px"
          prop = "isDel"
          sortable
          v-if = " false ">
        <template #default = "scope">
          <el-input-number clearable placeholder = "请输入是否删除 1 是 0否"
                           v-model = "batchDataList[scope.row.xh-1].isDel"/>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "状态名称"
          min-width = "200px"
          prop = "statusName"
          sortable
          v-if = " false ">
        <template #default = "scope">
          <el-input clearable placeholder = "请输入状态名称"
                    v-model = "batchDataList[scope.row.xh-1].statusName"></el-input>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "状态编码"
          min-width = "200px"
          prop = "statusCode"
          required
          sortable v-if = "true ">
        <template #default = "scope">
          <el-select placeholder = "请选择状态" v-model = "batchDataList[scope.row.xh-1].statusCode">
            <el-option
                :key = "sitem.statusCode"
                :label = "sitem.statusName"
                :value = "sitem.statusCode"
                clearable
                v-for = "sitem in selectData"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column fixed = "right" label = "操作" min-width = "150px">
        <template #header = "scope">
          <span>操作</span>&nbsp;&nbsp;
          <el-button @click = "handleAddDetails(scope.row,1)" link size = "mini" type = "primary">
            <el-tooltip content = "添加一行">
              <user-icon icon = "plus" style = "vertical-align: middle;color:#409EFF;"/>
            </el-tooltip>
          </el-button>
        </template>
        <template #default = "scope">
          <el-button @click = "handleAddDetails(scope.row,1)" link size = "mini" type = "primary">
            <el-tooltip content = "添加一行">添加</el-tooltip>
          </el-button>
          <el-button @click = "handleAddDetails(scope.row,2)" link size = "mini" type = "danger">
            <el-tooltip content = "删除当前行">删除</el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </star-horse-dialog>

  <star-horse-dialog :title = "dialogTitle" :visible = "dialogTableVisible" @merge = "merge" @mergeDraft = "mergeDraft"
                     @reset = "resetForm">
    <el-form :model = "ruleForm" :rules = "rules" class = "demo-ruleForm" ref = "ruleForm">
      <el-form-item label = "主键" prop = "idDbinfo" v-if = "false">
        <el-input clearable placeholder = "请输入主键"
                  v-model = "ruleForm.idDbinfo"></el-input>
      </el-form-item>

      <el-form-item label = "数据库类型" prop = "dbType"
                    required v-if = "!false">
        <el-select placeholder = "请选择数据库类型" v-model = "ruleForm.dbType">
          <el-option
              :key = "sitem.value"
              :label = "sitem.name"
              :value = "sitem.value"
              clearable
              v-for = "sitem in dbTypeList">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label = "数据库地址" prop = "host"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入数据库地址"
                  v-model = "ruleForm.host"></el-input>
      </el-form-item>
      <el-form-item label = "数据库名称" prop = "dbName"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入数据库名称"
                  v-model = "ruleForm.dbName">
        </el-input>
      </el-form-item>
      <el-form-item label = "端口" prop = "port"
                    required v-if = "!false">
        <el-input-number clearable placeholder = "请输入端口"
                         v-model = "ruleForm.port">
        </el-input-number>
      </el-form-item>
      <el-form-item label = "账号" prop = "userName"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入账号"
                  v-model = "ruleForm.userName"></el-input>
      </el-form-item>
      <el-form-item label = "密码" prop = "password"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入密码" type = "password"
                  v-model = "ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label = "修改人" prop = "updatedBy"
                    v-if = "!true">
        <el-input clearable placeholder = "请输入修改人"
                  v-model = "ruleForm.updatedBy"></el-input>
      </el-form-item>

      <el-form-item label = "修改日期" prop = "updatedDate"
                    v-if = "!true">
        <el-date-picker clearable placeholder = "请选择修改日期" type = "date"
                        v-model = "ruleForm.updatedDate">
        </el-date-picker>
      </el-form-item>

      <el-form-item label = "创建人" prop = "createdBy"
                    v-if = "!true">
        <el-input clearable placeholder = "请输入创建人"
                  v-model = "ruleForm.createdBy"></el-input>
      </el-form-item>

      <el-form-item label = "创建日期" prop = "createdDate"
                    v-if = "!true">
        <el-date-picker clearable placeholder = "请选择创建日期" type = "date"
                        v-model = "ruleForm.createdDate">
        </el-date-picker>
      </el-form-item>

      <el-form-item label = "是否删除 1 是 0否" prop = "isDel"
                    v-if = "!true">
        <el-input-number clearable placeholder = "请输入是否删除 1 是 0否"
                         v-model = "ruleForm.isDel"/>
      </el-form-item>

      <el-form-item label = "状态名称" prop = "statusName"
                    v-if = "!true">
        <el-input clearable placeholder = "请输入状态名称"
                  v-model = "ruleForm.statusName"></el-input>
      </el-form-item>

      <el-form-item label = "状态" prop = "statusCode"
                    required v-if = "!false">
        <el-select placeholder = "请选择状态编码" v-model = "ruleForm.statusCode">
          <el-option
              :key = "sitem.statusCode"
              :label = "sitem.statusName"
              :value = "sitem.statusCode"
              clearable
              v-for = "sitem in selectData"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </star-horse-dialog>
  <star-horse-dialog :is-view = "true" :title = "'查看数据'" :visible = "viewVisible">
    <el-form :model = "ruleForm" class = "view-ruleForm" label-width = "15%" ref = "ruleForm">
      <!--
                  <el-form-item label="主键" prop="idDbinfo">
                      <span>{{ruleForm.idDbinfo}}</span>
                  </el-form-item>-->
      <el-form-item label = "数据库类型" prop = "dbType">
        <span>{{ ruleForm.dbType }}</span>
      </el-form-item>
      <el-form-item label = "数据库地址" prop = "host">
        <span>{{ ruleForm.host }}</span>
      </el-form-item>
      <el-form-item label = "数据库端口" prop = "port">
        <span>{{ ruleForm.port }}</span>
      </el-form-item>
      <el-form-item label = "数据库名称" prop = "dbName">
        <span>{{ ruleForm.dbName }}</span>
      </el-form-item>
      <el-form-item label = "用户名" prop = "userName">
        <span>{{ ruleForm.userName }}</span>
      </el-form-item>
      <el-form-item label = "密码" prop = "password">
        <span>{{ ruleForm.password }}</span>
      </el-form-item>
      <el-form-item label = "修改人" prop = "updatedBy">
        <span>{{ ruleForm.updatedBy }}</span>
      </el-form-item>
      <el-form-item label = "修改日期" prop = "updatedDate">
        <span>{{ ruleForm.updatedDate }}</span>
      </el-form-item>
      <el-form-item label = "创建人" prop = "createdBy">
        <span>{{ ruleForm.createdBy }}</span>
      </el-form-item>
      <el-form-item label = "创建日期" prop = "createdDate">
        <span>{{ ruleForm.createdDate }}</span>
      </el-form-item>
      <el-form-item label = "是否删除 1 是 0否" prop = "isDel" v-if = "false">
        <span>{{ ruleForm.isDel == 1 ? "是" : "否" }}</span>
      </el-form-item>
      <el-form-item label = "状态名称" prop = "statusName">
        <span>{{ ruleForm.statusName }}</span>
      </el-form-item>
      <!--  <el-form-item label="状态编码" prop="statusCode">
            <span>{{ruleForm.statusCode}}</span>
        </el-form-item>-->
    </el-form>
  </star-horse-dialog>
  <el-card>
    <el-form class = "search_area" size = "default">
      <el-form-item label = "数据库类型">
        <el-select placeholder = "请选择数据库类型" v-model = "searchForm.dbType">
          <el-option
              :key = "sitem.value"
              :label = "sitem.name"
              :value = "sitem.value"
              clearable
              v-for = "sitem in dbTypeList"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label = "数据库名称">
        <el-input placeholder = "请选择数据库名称" v-model = "searchForm.dbName"/>
      </el-form-item>
      <el-form-item label = "添加时间">
        <el-date-picker
            end-placeholder = "结束日期" placeholder = "请选择添加时间"
            range-separator = "到"
            start-placeholder = "开始日期"
            type = "daterange"
            v-model = "searchForm.createdDate"
        />
      </el-form-item>
      <el-form-item label = "     ">
        <el-button @click = "dataSearch" link type = "primary">
          <user-icon icon = "search"/>
          <span style = "vertical-align: middle;"> 查询 </span>
        </el-button>
        <el-button @click = "dataSearch(1)" link small>
          <span style = "vertical-align: middle;"> 重置 </span>
        </el-button>
      </el-form-item>
    </el-form>
    <el-divider/>
    <star-horse-button-list
        :permission = "permission"
        :upload-url = "uploadUrl"
        @upload = "upload"
        @uploadProcess = "uploadProcess"
        @uploadError = "uploadError"
        @uploadSuccess = "uploadProcess"
        @btnOperation = "btnOperation"
    />


    <el-table
        :data = "dataList"
        :row-key = "getRowIdentity"
        @row-dblclick = "editData"
        @selection-change = "handleSelectionChange"
        border
        class = "data_table"
        fit = "true"
        highlight-current-row = "true"
        id = "dbinfoPo"
        max-height = "470px"
        ref = "multipleTable"
        stripe = "true">
      <el-table-column fixed width = "1"/>
      <el-table-column
          :reserve-selection = "true"
          align = "center"
          fixed = "left"
          type = "selection"
      />
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "主键"
          min-width = "200px"
          prop = "idUsersAudit"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "数据库类型"
          min-width = "200px"
          prop = "dbType"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "数据库地址"
          min-width = "200px"
          prop = "host"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "数据库端口"
          min-width = "200px"
          prop = "port"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "数据库名"
          min-width = "200px"
          prop = "dbName"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "账号"
          min-width = "200px"
          prop = "userName"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "密码"
          min-width = "200px"
          prop = "password"
          sortable
          v-if = "false ">
      </el-table-column>

      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "黑名单"
          min-width = "200px"
          prop = "exclusions"
          sortable
          v-if = "false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "修改人"
          min-width = "200px"
          prop = "updatedBy"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "修改日期"
          min-width = "200px"
          prop = "updatedDate"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "创建人"
          min-width = "200px"
          prop = "createdBy"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "创建日期"
          min-width = "200px"
          prop = "createdDate"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "是否删除 1 是 0否"
          min-width = "200px"
          prop = "isDel"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "状态名称"
          min-width = "200px"
          prop = "statusName"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "状态编码"
          min-width = "200px"
          prop = "statusCode"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column fixed = "right" label = "操作" min-width = "180px">
        <template #default = "scope">
          <el-button @click = "editById(scope.row[primaryKey])" link title = "" type = "primary"
                     v-if = "permission.edit">
            <el-tooltip content = "编辑">编辑</el-tooltip>
          </el-button>
          <el-button @click = "viewById(scope.row[primaryKey])" link title = "" type = "primary"
                     v-if = "permission.view">
            <el-tooltip content = "查看">查看</el-tooltip>
          </el-button>
          <el-button @click = "deleteById(scope.row[primaryKey])" link title = "" type = "danger"
                     v-if = "permission.delete">
            <el-tooltip content = "删除">删除</el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider/>
    <el-pagination
        :total = "totalData"
        @current-change = "pageChangeClick"
        @size-change = "pageSizeClick"
        layout = "total, sizes, prev, pager, next, jumper"
        v-model:currentPage = "currentPage"
        v-model:page-size = "pageSize"
        v-model:pageCount = "totalPage"/>
  </el-card>
</template>
<style>

</style>
<script>
import {getRequest} from "../../api/star_horse";

import {common} from "../../api/common";
import {ref} from "vue";

export default {
  name: "DbinfoEntity",

  mixins: [common],
  setup() {
    return {}
  },
  data() {
    const loadByPageUrl = ref("/system-config/dbsearch/dbinfoEntity/pageList");
    const mergeUrl = ref("/system-config/dbsearch/dbinfoEntity/merge");
    const mergeDraftUrl = ref("/system-config/dbsearch/dbinfoEntity/mergeDraft");
    const batchMergeUrl = ref("/system-config/dbsearch/dbinfoEntity/mergeBatch");
    const batchMergeDraftUrl = ref("/system-config/dbsearch/dbinfoEntity/mergeBatchDraft");
    const loadByIdUrl = ref("/system-config/dbsearch/dbinfoEntity/getById");
    const deleteUrl = ref("/system-config/dbsearch/dbinfoEntity/batchDeleteByIdLogic");
    const exportAllUrl = ref("/system-config/dbsearch/dbinfoEntity/exportData");
    const downloadTemplateUrl = ref("/system-config/dbsearch/dbinfoEntity/downloadTemplate");
    const uploadUrl = "/system-config/dbsearch/dbinfoEntity/importData";
    const primaryKey = "idDbinfo";
    return {
      uploadUrl,
      loadByPageUrl,
      mergeUrl,
      mergeDraftUrl,
      batchMergeUrl,
      batchMergeDraftUrl,
      loadByIdUrl,
      deleteUrl,
      exportAllUrl,
      downloadTemplateUrl,
      primaryKey,
      dbTypeList: []
    }
  },
  methods: {
    parseSearchData: function () {
      let data = this.searchForm;
      let arr = [];
      if (data.dbType) {
        arr.push({
          propertyName: "dbType",
          value: data.dbType,
          operation: "eq"
        });
      }
      if (data.dbName) {
        arr.push({
          propertyName: "dbName",
          value: data.dbName,
          operation: "lk"
        });
      }
      if (data.createdDate) {
        arr.push({
          propertyName: "createdDate",
          value: data.createdDate,
          operation: "bt"
        });
      }
      return arr;
    },

    dataFormat(row, column, cellValue, index) {
      cellValue = this.commonDataFormat(row, column, cellValue, index);
      if (column.property == "dbType") {
        let data = this.dbTypeList.filter(item => item.value === cellValue);
        return !data ? "-" : data[0].name;
      }

      return cellValue;

    },


    /**
     * 初始化数据
     */
    init: function () {
      this.dataList = [];
      this.selectData = [];
      this.loadByPage(this.currentPage, this.pageSize);
      this.loadPermissionResources();
      this.commonSelectData("sys_dbinfo");
      this.loadDbTypeList();
    },
    loadDbTypeList() {
      let _this = this;
      getRequest("/system-config/dbsearch/dbinfoEntity/dbType").then(res => {
        let redata = res.data.data;
        for (let val in redata) {
          _this.dbTypeList.push({name: redata[val], value: val});
        }

      })
    }

  },
  created() {
    this.init();
  }
}
</script>